<template>
  <view class="">

    <view class="fade-in" style="position: absolute;margin-left: 39%;z-index: 9999;" v-if="loading">
      <ayturn :type="1" :height="100" :width="200" :marginTop="10" :list="list3D"></ayturn>
      <ayturn :type="1" :height="100" :width="200" :marginTop="10" :list="list3D2"></ayturn>
      <ayturn :type="1" :height="100" :width="200" :marginTop="10" :list="list3D3"></ayturn>
    </view>


    <!--    <zero-loading v-if="loading" :mask="true" type="love"></zero-loading>-->
    <u-modal v-model="visibleAi" confirm-text="关闭" wight="50%" title="生成结果">
      <view class="padding-6">
        <find-list :location="1" :list="listVideoAiOne" :isAi="true" :offset='1.2' v-if="listVideoAiOne.length>0"
                   :goodsId="goodsId" :cols="1" ref="findList3"></find-list>
        <no-data :list="listVideoAiOne" v-else></no-data>
      </view>
    </u-modal>
    <!--    <u-tabs :list="tabsList"-->
    <!--            :current="tabsCurrent"-->
    <!--            :is-scroll="false"-->
    <!--            @click="tabsClick"-->
    <!--            @change="tabsChange"></u-tabs>-->

    <view class="flex-box flex-wrap">
      <view class="check" v-for="(item,index) in tabsList" :key="index"
            :style="[{'background':actives == index?activeBgColor:bgColor,'color':actives == index?activeTextColor:color},btnStyle]"
            @click="checkBtn(index,item)">
        <text class="texts" :style="{'fontSize':fontSize}">{{ item[defaultProps.name] }}</text>
      </view>

      <view style="justify-content: center;align-items:center;margin-right: 5px;display: flex;color: green;margin-left: 15px">

        <view style="display: flex;border: 1px solid #000;border-radius:25px;" hover-class="click">
          <view style="margin-left: 5px;margin-top: 5px"><u-icon  size="40" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon></view>
          <view style="margin-right: 10px;margin-left: 5px;margin-top: 5px" @click="aiGenerate">AI生成素材</view>
        </view>

        <view @click="changeBatch" style="margin-left: 5px">换一批</view>


      </view>
      <view style="margin-left: 10px">
        <view v-if="tabsCurrent===0" style="float: right;margin-right: 10px;margin-top: 10px">当前可供下载视频素材量： <span
            style="color: #ffa600">{{ videoNum }}</span>条
        </view>
        <view v-else style="float: right;margin-right: 10px;margin-top: 10px">当前可供下载图片素材量： <span
            style="color: #ffa600">{{ imgNum }}</span>条
        </view>
      </view>
    </view>


    <view v-show="tabsCurrent === 0">
      <FindSwiper v-if="listArrayVideo.length>0" :recommend="recommend" :shopId="shopId" :isOnlyOne="true"
                  :goodsId="goodsId" :trailerLink="trailerLink" :listArray="listArrayVideo"
                  :listVideoOrImg="listVideo" @reloadListVideo="reloadListVideo" :videoNum="videoNum" :imgNum="imgNum"
                  :type="1"></FindSwiper>
      <no-data :list="listArrayVideo" v-else></no-data>
    </view>
    <view v-show="tabsCurrent === 1">
      <FindSwiper v-if="listArrayImg.length>0" :recommend="recommend" :shopId="shopId" :goodsId="goodsId"
                  :trailerLink="trailerLink" :listArray="listArrayImg" :listVideoOrImg="listImg"
                  @reloadListImg="reloadListImg" :videoNum="videoNum" :imgNum="imgNum" type="3"></FindSwiper>
      <no-data :list="listArrayImg" v-else></no-data>
    </view>


    <tab-bar ref="tabbar" :active="2"></tab-bar>
    <notice></notice>

  </view>
</template>
<style scoped>
@import url('../../static/css/index/index.css');

@keyframes fadeIn {
  0% {
    opacity: 0; /* 初始透明度为0 */
  }
  100% {
    opacity: 1; /* 最终透明度为1 */
  }
}

.fade-in {
  animation: fadeIn 4s ease-out forwards; /* 动画时间为2秒，ease-out表示慢速开始加速，forwards表示保持最终状态 */
}

.contain {
  height: 10px !important;
}

.click{
  background-color: #70d1e2;
}
.flex-wrap {
  flex-wrap: wrap;
}

/* flex横向左右两边布局*/

.flex-space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* flex垂直居中布局*/

.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* flex横向不居中布局 */

.flex-box {
  display: flex;
  align-items: center;
}


/* flex横向居中布局 */

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* flex横向平均布局 */

.flex-space-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

/* flex 布局 */
.flex {
  display: flex;
  flex-direction: row;
}

/* flex1 */
.flex1 {
  flex: 1;
}

.check {
  min-width: 83px;
  text-align: center;
  height: 50rpx;
  line-height: 50rpx;
  box-sizing: border-box;
  background-color: #f6f6f6;
  color: #666666;
  border-radius: 10rpx;
  margin: 10rpx 10rpx;
}


/* .check:nth-child(3n) {
  margin-right: 0;
} */

.check_y {
  background-color: #cae4ff;
  color: #409dff;
}
</style>
<script>

import findList from './components/findlist.vue';
import FindSwiper from './components/findSwiper.vue';
import ayturn from '@/pagesA/components/3Dmove/ay-turn.vue'; //引入组件
const API = require('../../utils/api/find.js').default;
const $ = require('../../utils/api.js');
let self;
export default {
  name: "videoList",
  props: {
    recommend: {
      required: true,
      default: false,
    },
    trailerLink: {
      required: true,
      default: '',
    },
    goodsId: {
      required: true,
      default: '',
    },
    shopId: {
      default: '',
    }
  },
  data() {
    return {
      color: "black",
      btnStyle: {},
      activeTextColor: "blue",
      activeBgColor: "#64bfc2",
      bgColor: "#a3daa3",
      actives: this.active=0,
      arr: [],
      select: [],
      defaultProps: {
        name: 'name',
        id: 'id',
      },
      fontSize: "24rpx",


      num: 0,
      list3D: [
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/1.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/2.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/3.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/4.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/5.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/6.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/7.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/8.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/9.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },],
      list3D2: [
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/10.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/11.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/12.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/13.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/14.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/15.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/16.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/17.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/18.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },],
      list3D3: [
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/19.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/20.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/21.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/22.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/23.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/24.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/25.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/26.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },
        {
          img: 'https://img.fscmkjznb.com/static/aiLoading/27.png' + "?" + uni.getStorageSync('imageProcessingSuffix'),
        },],
      listArrayVideo: [],
      listArrayImg: [],
      listVideoAiOne: [],
      listVideoAllId: [],
      visibleAi: false,
      loading: false,
      tabsCurrent: 0,
      tabsList: [{
        name: "短视频素材"
      }, {
        name: '图片素材'
      }],
      top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
      isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
      active: 0,
      listVideo: [],
      listImg: [],
      page: 1,
      pageSize: 20,
      totalPage: 1,
      isRefresh: false,
      refreshClass: [''],
      style: '',
      videoNum: 0,
      imgNum: 0
    };
  },

  onLoad: function () {
    self = this;
    this.init();

  },
  onShow() {
    this.$nextTick(() => {
      this.$refs.tabbar.reloadHeight();
      this.$refs.tabbar.getChatLen();
    })
  },
  methods: {
    /* 单选 */
    checkBtn(e, info) {

      // console.log(info)
      this.actives = e;
      info.idx = e;
      this.tabsCurrent = e;
    },
    reloadListVideo() {
      this.listVideo = []
      this.listArrayVideo = []
      this.getList(1)
    },
    reloadListImg() {
      this.listImg = []
      this.listArrayImg = []
      this.getList(3)
    },

    aiGenerate(e) {
      //ai模拟生成5秒
      this.loading = true
      setTimeout(() => {
        this.loading = false
        uni.vibrateShort({style: "heavy"}) //震动效果

        //打开一个模态框里面放个视频
        //请求后台
        this.getListForAi()
        this.visibleAi = true
      }, 5000);

    },
    changeBatch() {
      if (this.tabsCurrent === 0) {
        this.listVideo = []
        this.listArrayVideo = []
        this.getList(1)
      } else {
        this.listImg = []
        this.listArrayImg = []
        this.getList(3)
      }
    },
    tabsClick(item) {
      console.log('item', item);
    },
    tabsChange(index) {
      self.tabsCurrent = index;
    },
    getListForAi() {

      const self = this;
      self.listVideoAiOne = []
      $.ajax({
        url: API.findListApiForAi,
        data: {
          showIds: self.listVideoAllId,
          type: 1,
          isRefreshGetNumber: true,
          goodsId: self.goodsId,
          page: self.page,
          pageSize: self.pageSize
        },
        loading: true,
        method: 'GET',
        success(res) {
          let list = res.data ? res.data : [];
          if (list.length <= 0 && self.page == 1) {
            return;
          }
          list.forEach((ele, index) => {
            let obj = ele.walkTrends;
            obj.showDownload = true;
            obj.downloadingButtonLabel = '';
            obj.collectTrends = ele.collectTrends;
            obj.collectWalkMember = ele.collectWalkMember;
            obj.index = index;
            if (obj.videoUrl && obj.videoUrl != '') {
              obj['mainImg'] = obj.videoUrl + "?" + uni.getStorageSync('imageProcessingSuffix');
            } else if (String(obj.images).indexOf('|') >= 0) {
              obj['mainImg'] = obj.images.split('|')[0];
            } else {
              obj['mainImg'] = obj.images;
            }
            self.listVideoAiOne.push(obj);
          })

        }
      })

    },
    getAllMaterialNum() {
      const self = this;
      console.log("self.goodsId", self.goodsId)

      let data = {}
      if (self.shopId) {
        data = {
          shopId: self.shopId,
          goodsId: self.goodsId
        }
      } else {
        data = {
          goodsId: self.goodsId
        }
      }
      $.ajax({
        url: API.getAllMaterialNum,
        data: data,
        loading: true,
        method: 'GET',
        success(res) {
          self.videoNum = res.data.videoNum
          self.imgNum = res.data.imgNum
        }
      })
    },
    getList(type) {
      const self = this;
      self.list = []
      self.listVideoAllId = []
      $.ajax({
        url: API.findListApi,
        data: {
          type: type,
          isRefreshGetNumber: true,
          goodsId: self.goodsId,
          page: self.page,
          pageSize: self.pageSize
        },
        loading: true,
        method: 'GET',
        success(res) {
          let list = res.data.list ? res.data.list : [];
          if (list.length <= 0 && self.page == 1) {
            self.list = [];
            return;
          }
          list.forEach((ele, index) => {
            let obj = ele.walkTrends;
            obj.showDownload = true;
            obj.downloadingButtonLabel = '';
            obj.collectTrends = ele.collectTrends;
            obj.collectWalkMember = ele.collectWalkMember;
            obj.index = index;
            if (obj.videoUrl && obj.videoUrl != '') {
              obj['mainImg'] = obj.videoUrl + "?" + uni.getStorageSync('imageProcessingSuffix');
            } else if (String(obj.images).indexOf('|') >= 0) {
              obj['mainImg'] = obj.images.split('|')[0];
            } else {
              obj['mainImg'] = obj.images;
            }
            if (type === 1) {
              self.listVideoAllId.push(obj.id);
              self.listVideo.push(obj);

              let videoSwiper = {
                image: obj.mainImg,
                title: "下载"
              }
              self.listArrayVideo.push(videoSwiper)
            } else {
              self.listImg.push(obj);

              let imgSwiper = {
                image: obj.mainImg,
                title: "下载"
              }
              self.listArrayImg.push(imgSwiper)
            }


          })


          self.totalPage = res.data.totalPage;

          uni.stopPullDownRefresh();

          // #ifdef MP-WEIXIN
          if (self.isRefresh) {
            self.isRefresh = false;
            self.refreshClass = ['fadeIn'];
          }
          // #endif

        }
      })
    },

    init() {
      this.page = 1;
      this.getList(1);
      this.getList(3);
      this.getStyle().then((res) => {
        self.style = res;
      })
    },
  },
  computed: {
    i18n() {
      return this.$t('find')
    },
  },
  watch: {
    goodsId: {
      handler(newValue, oldValue) {
        self.goodsId = newValue
        self.init();//父组件updateTime对象改变会触发此函数
        self.getAllMaterialNum()
      },
      deep: true
    },
  },
  created() {
    self = this
    self.init();
    self.getAllMaterialNum()
    /* #ifdef H5 */

    /*#endif*/

  },
  mounted() {
  },
  destroyed() {
  },
  components: {findList, FindSwiper, ayturn},
  onPullDownRefresh() {
    // #ifdef MP-WEIXIN
    this.isRefresh = true;
    this.refreshClass = ['fadeOut'];
    // #endif
    this.init();
  },
  onReachBottom() {
    if (this.page < this.totalPage) {
      this.page += 1;
      this.getList(1);
      this.getList(3);
    }
  }
}

</script>
